.checkboxRoot {
  all: unset;

  cursor: pointer;

  position: relative;

  width: 18px;
  height: 18px;
}

.checkboxRoot::before {
  content: '';

  position: absolute;
  top: -50%;
  left: -50%;
  transform: scale(0);

  width: 36px;
  height: 36px;

  background-color: var(--color-dark-500);
  border-radius: 50%;

  transition: all 0.3s;
}

.checkboxRoot:hover::before {
  transform: scale(1);
}

.checkboxRoot:hover:active::before {
  transform: scale(1);
  background-color: var(--color-dark-100);
  transition-delay: -0.5s;
}

.checkboxRoot:hover:focus-visible::before {
  transform: scale(1);
  background-color: var(--color-dark-100);
}

.label {
  all: unset;

  cursor: pointer;

  display: flex;
  gap: 0 15px;
  align-items: center;

  width: max-content;
}

.checkboxIndicator {
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;

  border-radius: 2px;

  fill: var(--color-light-100);
}

.checkboxIndicatorDisabled {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;

  width: 18px;
  height: 18px;

  background: var(--color-light-700);
  border-radius: 2px;

  fill: var(--color-dark-100);
}

.frame {
  position: absolute;
  z-index: 5;
  inset: 0;

  box-sizing: border-box;

  border: 2px solid var(--color-light-900);
  border-radius: 2px;
}

.frameDisabled {
  position: absolute;
  z-index: 5;
  inset: 0;

  box-sizing: border-box;

  border: 2px solid var(--color-dark-100);
  border-radius: 2px;
}
